<template>
    <div class="MainLayoutArea"  style="width: 100%;height: 100%; display: flex;flex-direction: column;">



        <div style="width: 100%;padding-bottom: 10px;">
            <el-card class="button-card"
                     :body-style="bodyStyle">

                <el-row type="flex"   justify="space-around">
                    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="16" style="text-align: center">
                        <span style="font-size: large" >{{blog.title}}</span>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="info" size="mini" @click="updateMenuStatus">{{viewMenuTitle}}</el-button>
                    </el-col>
                </el-row>

            </el-card>
        </div>

<!--        博客展示区域-->
        <div class="blogMainArea"  >
            <mavon-editor
                    class="editorStyle"
                    v-model="blog.content"
                    :subfield="false"
                    :boxShadow="false"
                    :navigation="navigation"
                    :scrollStyle="true"
                    defaultOpen="preview"
                    :toolbarsFlag="false"
                    :ishljs="true">

            </mavon-editor>
        </div>

<!--        评论区域-->
<!--        <div class="commentArea">-->
<!--            <el-card>-->
<!--                评论区域-->
<!--            </el-card>-->
<!--        </div>-->





    </div>


</template>

<script>
    import { mavonEditor } from 'mavon-editor'          //引入markdown编辑器
    import 'mavon-editor/dist/css/index.css'            //引入markdown编辑器相关样式
    import Clipboard from "clipboard";                  //引入剪切板复制类

    export default {
        name: "BlogView",
        components:{
            mavonEditor,
        },
        data(){
            return{
                queryBlogId : Number,       //查询的博客id
                blog:{},                    //正在展示的博客信息
                navigation:true,           //是否显示目录
                bodyStyle:{                 //card的body样式
                    padding: '10px' ,
                    lineHeight: '40px',
                },
                viewMenuTitle: "关闭导航栏",     //提示是否关闭博客的导航栏界面


            }
        },
        created() {
            this.queryBlogId=this.$route.query.id;
            this.$emit('watchBlogView');

            this.queryBlogById();
        },
        mounted() {

            this.updateMenuStatus();
        },
        methods:{
            //通过id查询博客信息
            queryBlogById(){
                this.request.get("/index/blog/queryBlogById",{
                    params:{
                        id:this.queryBlogId,
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        this.blog=res.data;
                        this.addCopyBtn();
                        this.addUrl();
                    }else if(res.code=="301"){
                        this.$message({
                            message: res.data,
                            type: 'warning'
                        });
                    }
                })
            },
            //改变bolg的目录状态
            updateMenuStatus(){
                this.navigation=!this.navigation;

                if (!this.navigation){
                    document.getElementsByClassName("v-note-navigation-wrapper transition")[0]
                        .style.display = "none";
                    this.viewMenuTitle="打开导航栏";
                }else{
                    document.getElementsByClassName("v-note-navigation-wrapper transition")[0]
                        .style.display = "";
                    this.viewMenuTitle="关闭导航栏";

                }
            },
            // 复制代码函数
            shareCopy(codeText) {
                let that=this;
                let isSuccess = false; // 添加一个标志位，用于判断是否已经执行过success回调
                let clipboard = new Clipboard('.code-copy', {
                    text: function() {
                        return codeText
                    }
                })
                clipboard.on('success', e => {
                    if (!isSuccess){
                        // 复制成功
                        that.$message({
                            message: '复制成功',
                            type: 'success'
                        });
                        isSuccess=true;
                        e.clearSelection();
                    }

                })
                clipboard.on('error', e => {
                    if (!isSuccess){
                        // 复制成功
                        that.$message({
                            message: '复制失败',
                            type: 'error'
                        });
                        isSuccess=true;
                        e.clearSelection();
                    }
                })
            },
            // 动态添加复制按钮以及复制方法（获取到文档content成功的时候调用此方法）
            addCopyBtn() {
                this.$nextTick(() => {
                    let that=this;
                    let content = document.getElementsByClassName('v-show-content')[0]
                    let precodes = content.getElementsByTagName('pre')
                    let arr = Array.from(precodes)
                    arr.forEach((element) => {
                        let btn = document.createElement('div')
                        btn.innerHTML = 'copy';
                        btn.setAttribute('class', 'code-copy')
                        btn.addEventListener('click', function(e) {
                            let code = e.target.parentElement.children[1] // code 标签
                            let codeText = code.innerText
                            // 复制函数
                            that.shareCopy(codeText);
                        })
                        element.insertBefore(btn, element.firstChild);
                    })
                })
            },
            // 自定义修改导航侧边栏
            addUrl() {
                this.$nextTick(function () {
                    let _aList = document.querySelectorAll(".v-note-navigation-content a");
                    for (let i = 0; i < _aList.length; i++) {
                        let _aParent = _aList[i].parentNode;
                        let _a = _aParent.firstChild;
                        if (!_a.id) continue; // 把不属于导航中的a标签去掉，否则会报错
                        let _text = _aParent.lastChild;
                        let text = _text.textContent;
                        _a.href = "#" + _a.id;
                        _a.innerText = text;
                        _aParent.removeChild(_text);
                        // _a.style.color = "red";
                    }
                });
            },

        }
    }
</script>

<style scoped>

    .editorStyle{
        max-height: 100%;
        min-height: 80vh;
        width: 100%;
    }

    /deep/ .hljs {
        color: #24292e;
        background: transparent;
        padding: 15px;

    }


    /deep/ .markdown-body pre {
        background: #dfdbdb54;

    }



    /deep/ .v-note-wrapper .v-note-panel .v-note-navigation-wrapper {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        position: absolute;
        width: 250px;
        right: 25px;
        top: 0;
        bottom: 0;
        height: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        background-color: rgba(255,255,255,0.98);
        border-left: 1px solid #f2f6fc;
        border-right: 1px solid #f2f6fc;
    }

    /deep/ .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
        box-shadow: 0 2px 12px 0 rgba(242, 231, 231, 0.1);
    }

    .button-card{
        text-align: center;
    }

    /deep/  .code-copy {
        padding: 0 10px;
        background: #FFFFFF;
        border: 1px solid #5592E5;
        border-radius: 2px;
        font-size: 14px;
        color: #5592E5;
        cursor: pointer;
        display: inline-block;
        float: right;
    }

    /deep/ .v-note-wrapper .v-note-panel .v-note-navigation-wrapper.transition {
        transition: all 0.1s linear 0s;
        position: fixed;
        right: 19%;
        top: 18%;
        height: 70%;
    }

    /*.commentArea{*/
    /*    width: 100%;*/
    /*    min-height: 100px;*/
    /*    margin-top: 10px;*/
    /*}*/








</style>